const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    /**
     * 项目开发：一般可以分为2种模式，一种“开发模式”（开发环境），另一种叫“生产模式”（生产环境）
     * 开发环境：当我们在开发项目阶段，这个过程中我们都是使用开发服务器来打包项目的，这个环境就是开发环境
     * 生产环境：项目开发完成了，我们需要通过 npm run build 打包我们的项目，这个时候就叫生产环境
     * */ 
    mode: "development", // 开发环境用development表示，生产环境用production表示
    entry: './src/main.js',
    // plugins -- 这个属性是webpack提供的，专门给插件添加配置的地方
    plugins: [
        new HtmlWebpackPlugin({
            // template: 模板，也就是将来打包的到dist文件中的html是根据这个模块html生成的
            // 如何没有配置模板，会自动生成一个html打包到dist文件中。
            template: './public/index.html'
        })
    ],
    module: {
        rules: [ // 专门用于配置加载器的地方
            { // 处理css文件
                test: /\.css$/i, // 正则表达式 表示匹配以.css结尾的文件 ，i 表示不区分大小写
                // 注意：这两个加载的书写顺序不能改变
                use: [ 'style-loader', 'css-loader' ] // 表示用我们下载的两个加载器来处理css文件
            },
            {   // 处理less文件
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {   // 处理图片
                test: /\.(png|jpg|gif|jpeg)$/i,
                // 利用webpack5的asset module技术实现webpack处理图片
                // 当图片小于8kb的时候，将图片转base64打包进js代码中
                // 大于8kb，直接输入文件
                type: 'asset'
            },
            { // 处理字体图标文件
                test: /\.(eot|svg|tff|woff|woff2)$/,
                type: 'asset/resource',
                generator: {
                    // [name]：表示获取到文件的原名字
                    // [hash:6]: 表示生成6位数的哈希值
                    // hash(哈希): 由字母和数字构成的随机字符串 
                    // 就叫哈希值
                    // [ext]: 表示获取原文件的后缀名
                    // 对打包后的字体图标文件进行重命名
                    filename: 'font/[name].[hash:6][ext]', 
                }
            },
            { // 语法降级处理
                test: /\.js$/,
                // 排除不需要降级处理的js文件，
                // 比如我们下载在node_modules文件中的第三方包
                exclude: /node_modules/, 
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },
    // devServer 就是专门用来设置开发服务器相关的配置的地方
    devServer: {
        port: 3000  // 设置端口号为3000
    }
}

/**
 * 总结
 * html-webpack-plugin插件
 * 作用：自动根据我们写的HTML模块，生成并打包进入到dist文件中，并且能够自动
 * 引入打包后的js文件
 * 
 * css的处理
 * 默认情况下，webpack只能处理js文件，因此要处理css文件的时候需要用到加载器
 * 这个加载器相当于游戏中的装备，我们购买了它，我们就能获取到对应的技能
 * 
 * 我们需要有2个加载器来处理css文件
 * css-loader: 让webpack能处理css类型文件
 * style-loader: 把css插入到DOM中，从而让样式生效
 * 
 * 注意：配置加载器的时候，2个加载器的书写顺序一定不能改变
 * 要先写style-loader再写css-loader
 * 为什么呢？答：因为我们只能先让webpack处理好了css文件，然后才能把样式插入到DOM。
 * 那为什么要先写style-loader呢？答：因为代码执行是从右到左执行的。
 * 
 * less的处理
 * 1、下载加载器
 * npm i less less-loader -D
 * 2、添加配置
 *          {   // 处理less文件
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
 *  3、src/less/index.less文件
            然后写上设置li标签字体大小
    4、将这个less文件引入到main.js中
 *  5、打包，在浏览器中看效果，字体大小是否改变了

    图片的处理
    利用webpack5提供的asset module技术实现处理
    设置 type为asset值即可处理图片

    语法降级处理
    用到babel插件
    1、下载 
    npm install babel-loader @babel/core @babel/preset-env -D
    2、根据文档添加配置即可
    3、测试 -- 比如写一个箭头函数，看打包后能否转为普通函数


    开发服务器的使用
       开发服务器，把代码打包运行在内存中，自动更新，实时返回给浏览器显示
    
    注意：通过开发服务器打包的项目是在内存中的，也就是说我们是看不到的，必须通过开发服务器
    给我的服务器地址才能正确访问到打包在内存中的项目。

 * */ 